<template>
  <div class="playlists-container">
    <div class="tab-container">
      <!-- tab的内容区域 -->
      <div class="tab-content">
        <div class="items">
          <div class="item" v-for="(item, index) in playlists" :key="index" @click="toPlaylist(item.id)">
            <div class="img-wrap">
              <img :src="item.coverImgUrl+'?param=200y200'" alt="" />
              <span class="iconfont icon-play"></span>
            </div>
            <p class="name">{{ item.name }}</p>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import axios from 'axios'

export default {
  name: 'mysong',
  data () {
    return {
      cookie: '',
      // 用户id
      uid: '',
      // 歌单列表
      playlists: []
    }
  },

  async created () {
    console.log(this.cookie)
    this.cookie = this.$route.query.cookie
    this.uid = this.$route.query.uid
    console.log(this.cookie)
    this._getUserDetail()
    this._getUserPlaylist()
  },

  methods: {

    // 获取用户详情
    async _getUserDetail () {
      const {data: resp2} = await this.getUserDetail(this.uid, this.cookie)
      console.log('用户详情：')
      console.log(resp2)
    },
    getUserDetail (uid, cookie) {
      return axios.post(`/user/detail/${uid}/${cookie}`)
    },

    // 获取用户歌单
    async _getUserPlaylist () {
      const {data: resp3} = await this.getUserPlaylist(this.uid, this.cookie)
      this.playlists = resp3.playlist
      console.log('用户歌单：')
      console.log(resp3)
    },
    getUserPlaylist (uid, cookie) {
      return axios.post(`/user/playlist/${uid}/${cookie}`)
    },

    // 显示歌单内容
    toPlaylist (id) {
      this.$router.push(`/playlist?id=${id}`)
      // console.log(id)
    }
  }
}
</script>

<style scoped>

</style>
